var tabbar = [{
			id: 0,
			name: '首页',
			iconPath: 'img/ic_tab_home_nor.png',
			iconPathSelect: 'img/ic_tab_home_sel.png',
			unread: 36,
			checked: true,
			pagePath: 'page/tabbar/home.html'
		},
		{
			id: 1,
			name: '分类',
			iconPath: 'img/ic_tab_classify_nor.png',
			iconPathSelect: 'img/ic_tab_classify_sel.png',
			unread: 0,
			checked: false,
			pagePath: 'page/tabbar/classify.html'
		},
		{
			id: 2,
			name: '购物车',
			iconPath: 'img/ic_tab_shop_nor.png',
			iconPathSelect: 'img/ic_tab_shop_sel.png',
			unread: 0,
			checked: false,
			pagePath: 'page/tabbar/car.html'
		},
		{
			id: 3,
			name: '我的',
			iconPath: 'img/ic_tab_me_nor.png',
			iconPathSelect: 'img/ic_tab_me_sel.png',
			unread: 0,
			checked: false,
			pagePath: 'page/tabbar/me.html'
		}
	],

	tabIndex = 0,
	swiperFragment = null;

window.addEventListener('resize', function() {
	// 处理窗口大小变化的逻辑代码
	window.location.reload()
});

$(() => {
	let mindex = getKeepAliveIndex();
	if (mindex) {
		tabIndex = mindex;
	}
	initSwiperFragment();
	initTabbar();
	initListener();
})

initListener = () => {
	$("#location").on('click', (e) => {
		navigateTo(`page/common/select_city.html`)
	});
	$("#load_layout_cart").on('click', (e) => {
		onTabbarChange(null, 0)
	});
}

initSwiperFragment = () => {
	swiperFragment = new Swiper('.swiper_fragment', {
		initialSlide: tabIndex,
		direction: 'horizontal', //Slides的滑动方向，可设置水平(horizontal)或垂直(vertical)。
		loop: false,
		noSwiping: true,
		autoHeight: false, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化。
		onSlideChangeEnd: (swiper) => { //回调函数，swiper从一个slide过渡到另一个slide结束时执行。
			//tagIndex = swiper.activeIndex;
		}
	});
}

initTabbar = () => {
	let tabbarHtml = ``;
	let tabContentHtml = ``;
	$("#tabbar").html('');
	tabbar.forEach((e, i) => {
		let id = e.id;
		let menuUrl = e.iconPath;
		let unread = e.unread;
		let checked = i == tabIndex ? true : false;
		if (checked) {
			menuUrl = e.iconPathSelect;
		}
		let unreadHtml = ``;
		if (unread > 0) {
			unreadHtml = `<div class="tabbar_badge">${unread}</div>`
		}

		let pagePath = e.pagePath;

		tabbarHtml += `<input type="radio" id="${id}" name="tabbar" class="tabbar_input" readonly="readonly" ${checked?'checked':''} onchange="onTabbarChange(this,'${i}')"/>
						<label for="${id}" class="tabbar_item">
							<img src="${menuUrl}" class="tabbar_icon"/>
							${e.name}
							${unreadHtml}
						</label>`;
	})
	$("#tabbar").html(tabbarHtml);

}

onTabbarChange = (e, index) => {
	tabIndex = index;
	initTabbar();
	setKeepAliveIndex(index);
	swiperFragment.slideTo(tabIndex, 500, false);
}
